<script setup >
import { ref, reactive } from "vue";
import { findOrderDetail, confOrder, logisticsOrder } from "@/api/order";
import { useRoute } from "vue-router";
import { useDialog, useMessage, NSteps, NStep, NSkeleton } from "naive-ui";
const route = useRoute();
const order = ref(null);
const dialog = useDialog();
const message = useMessage();
findOrderDetail(route.params.id).then((res) => {
  order.value = res;
  if (res.orderState === 6) {
    current.value = null;
  } else if (res.orderState === 4) {
    current.value = 5;
  } else if (res.orderState >= 3 && res.orderState < 6) {
    current.value = res.orderState;
    logisticsOrder(route.params.id).then((res) => {
      logistics.value = res.list[res.list.length - 1];
    });
  } else {
    current.value = res.orderState;
  }
  stepsList.value = [
    {
      title: "提交订单",
      desc: res.createTime || "",
    },
    {
      title: "付款成功",
      desc: res.payTime || "",
    },
    {
      title: "商品发货",
      desc: res.consignTime || "",
    },
    {
      title: "确认收货",
      desc: res.endTime || "",
    },
    {
      title: "订单完成",
      desc: res.endTime || "",
    },
  ];
});

// 取消订单
const orderCancelDom = ref(null);
const cancelOrder = (order) => {
  orderCancelDom.value.open(order);
};

// 确认收货
const confirmOrder = (order) => {
  dialog.create({
    title: "提示",
    content: "您确认收货吗？",
    positiveText: "确定",
    negativeText: "取消",
    onPositiveClick: () => {
      confOrder(order.id).then(() => {
        message.success("确认收货成功！");
        order.orderState = 5;
      });
    },
  });
};

// 进度条
const current = ref(null);
let stepsList = ref(null);

// 获取物流
let logistics = ref(null);

// 查看物流
const orderLogisticsDom = ref(null);
const findLogisticsOrder = () => {
  orderLogisticsDom.value.open(order.value);
};
</script>

<template>
  <div class="order-detail">
    <!-- 头部 -->
    <div style="padding-top: 30px" v-if="!order">
      <n-skeleton style="margin: 0px auto" height="150px" width="900px" />
    </div>

    <order-action
      v-else
      :order="order"
      @on-cancel="cancelOrder"
      @on-confirm="confirmOrder"
    ></order-action>
    <!-- 进度 -->
    <n-skeleton
      v-if="!stepsList"
      class="detail-logistics"
      height="150px"
      width="900px"
    />

    <div class="steps" v-if="stepsList">
      <n-steps :current="current">
        <n-step
          v-for="(item, key) in stepsList"
          :key="key"
          :title="item.title"
          :description="item.desc"
        />
      </n-steps>
    </div>

    <!-- 物流 -->
    <div class="detail-logistics" v-if="logistics">
      <p>
        <span>{{ logistics.time }}</span>
        <span>{{ logistics.text.substr(3, logistics.text.length) }}</span>
      </p>
      <a @click="findLogisticsOrder">查看物流</a>
    </div>
    <n-skeleton
      v-if="!order"
      class="detail-logistics"
      height="700px"
      width="900px"
    />
    <!-- 信息 -->
    <order-info v-else :order="order"></order-info>
  </div>
  <order-cancel ref="orderCancelDom"></order-cancel>
  <order-logistics ref="orderLogisticsDom"></order-logistics>
</template>

<style scoped lang='less'>
.order-detail {
  background: #fff;
  height: 100%;
  .steps {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-left: 65px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.detail-logistics {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  background-color: #f5f5f5;
  margin: 30px 50px 0;
  > p {
    flex: 1;
    span {
      color: #999;
      &:first-child {
        margin-right: 30px;
      }
    }
  }
  > a {
    color: @xtxColor;
    cursor: pointer;
    text-align: center;
  }
}
</style>